<template>
<div>
    <!-- Form -->
    <el-button type="ChangePass" @click="dialogFormVisible = true">修改密码</el-button>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="404px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <!--输入框-->
            <el-form-item label="  原密码：" prop="Password">
                <el-input v-model="ruleForm.Password" placeholder="请输入原密码" autocomplete="off"></el-input>
            </el-form-item>
            <!--输入框-->
            <el-form-item label="   新密码：" prop="NewPassword">
                <el-input v-model="ruleForm.NewPassword" placeholder="请输入新密码" autocomplete="off"></el-input>
            </el-form-item>
            <!--输入框-->
            <el-form-item label="   确认密码：" prop="checkPass">
                <el-input v-model="ruleForm.checkPass" placeholder="请再次输入新密码" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>

        <!--结束-->
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('ruleForm')">取 消</el-button>
            <el-button type="primary" @click="ChangePass('ruleForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>
export default {
    components: {},
    data() {
        //新密码匹配规则
        var validateNewPass = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入新密码"));
            } else {
                // let boolean = /^[A-Za-z0-9]+$/;
                // let res = boolean.test(this.ruleForm.NewPassword);
                let res = true
                if (res) {
                    callback();
                } else {
                    callback(new Error("密码由数字字母组成"));
                }

            }
        };
        //确认密码匹配规则
        var validateNewPassword = (rule, value, callback) => {
            if (this.ruleForm.NewPassword === "") {
                callback();
            } else if (this.ruleForm.NewPassword.length > 0 && value === "") {
                callback(new Error("请再次输入密码"));
            } else if (value !== this.ruleForm.NewPassword) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }

        };
        return {
            dialogFormVisible: false,
            ruleForm: {
                Password: "",
                NewPassword: "",
                checkPass: "",
            },
            rules: {
                Password: [{
                    required: true,
                    message: "请输入原密码",
                    trigger: "blur"
                }, ],
                NewPassword: [{
                    required: true,
                    validator: validateNewPass,
                    trigger: "blur"
                }, ],
                checkPass: [{
                    required: true,
                    validator: validateNewPassword,
                    trigger: "blur"
                }, ],
            },
        };
    },
    methods: {
        resetForm(formName) {
            this.dialogFormVisible = false;
            this.$refs[formName].resetFields();
        },
        ChangePass(formName) {
            let newpass = this.$md5(this.ruleForm.NewPassword);
            let oldpass = this.$md5(this.ruleForm.Password);
            // console.log(pass, "pass")
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.Api.getChangePass({
                        oldPwd: oldpass,
                        newPwd: newpass,
                    }).then((res) => {
                        if (res) {
                            // console.log(res, "dsadsa ")
                            this.$message.success("修改成功");
                            this.dialogFormVisible = false;
                            this.$router.go(0)
                            // alert("submit!");
                            this.resetForm('ruleForm')
                        }

                    });
                } else {
                    // console.log('error submit!!');
                    // alert("error submit!");
                    return false;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
/deep/.el-button--ChangePass {
    width: 80px;
    height: 36px;
    background: rgba(61, 127, 255, 1);
    border-radius: 3px;
    padding: 0;
    color: white;
    font-size: 14px;
}

/deep/.el-dialog__wrapper {
    z-index: 2091 !important;

    .el-dialog {
        .el-dialog__header {
            background: rgba(230, 233, 237, 1);
            border-radius: 8px 8px 0px 0px;
            border: 1px solid rgba(230, 233, 237, 1);
            padding: 11px 20px 11px 24px;

            .el-dialog__title {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                line-height: 24px;
            }

            .el-dialog__headerbtn {
                top: 15px;
            }
        }

        .el-dialog__body {
            padding: 30px 30px 0px 30px;

            .el-form {
                .el-form-item {
                    margin: 0 0 16px 0;

                    .el-form-item__label {
                        width: 85px !important;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        padding: 0;
                    }

                    .el-form-item__content {
                        margin-left: 85px !important;

                        .el-input__inner {
                            width: 260px;
                            height: 36px;
                            background: rgba(255, 255, 255, 1);
                            border-radius: 4px;
                            border: 1px solid rgba(221, 221, 221, 1);
                            padding-left: 12px;
                        }
                    }
                }

                .pic-box {
                    display: flex;
                    padding-bottom: 10px;

                    .h1-1 {
                        width: 85px;
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                        text-align: right;
                    }

                    .h1-1::before {
                        content: "* ";
                        color: #ff0000;
                    }
                }

                .flex-box {
                    display: flex;
                    justify-content: flex-end;

                    .pic-Tips {
                        width: 360px;
                        padding-top: 6px;
                        padding-bottom: 15px;
                        border-top: 1px solid #dddddd;

                        h1 {
                            font-size: 12px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: rgba(153, 153, 153, 1);
                            line-height: 22px;
                        }
                    }
                }
            }

            .text-box {
                display: flex;

                .text-title {
                    width: 105px;
                    height: 22px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    text-align: right;
                }

                .text-title::before {
                    content: "* ";
                    color: #ff0000;
                }

                .el-textarea__inner {
                    min-height: 100px !important;
                    padding-left: 10px;
                }
            }
        }

        .el-dialog__footer {
            padding: 30px 30px 26px;

            .dialog-footer {
                .el-button--default {
                    width: 70px;
                    height: 36px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 3px;
                    border: 1px solid rgba(215, 219, 224, 1);
                    padding: 0;
                    color: rgba(51, 51, 51, 1);
                }

                .el-button--primary {
                    width: 70px;
                    height: 36px;
                    background: rgba(61, 127, 255, 1);
                    border-radius: 3px;
                    padding: 0;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}
</style>
